<template>
    <div class="meeting-page">
        <el-card shadow="never">
            <el-button type="primary" @click="onJump">新增</el-button>
            <el-table :data="data" v-loading="loading">
                <el-table-column label="序号" type="index"/>
                <el-table-column label="会议名" prop="name"/>
                <el-table-column label="描述" prop="describe"/>
                <el-table-column label="图片">
                    <template slot-scope="{row}">
                        <el-image class="meet-img" :src="row.image" :preview-src-list="[row.image]"></el-image>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="{row}">
                        <el-button @click="onJump(row.id)">编辑</el-button>
                        <el-button @click="onDelete(row.id)" type="danger">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
    </div>
</template>

<script>
import { Image } from 'element-ui';

export default {
    components: {
        ElImage: Image,
    },
    data() {
        return {
            loading: false,
            form: {
                page: 1,
                size: 10,
            },
            data: [],
        };
    },
    methods: {
        fetchData() {
            this.loading = true;
            API.get('meeting').then(res => {
                this.data = res;
            }).finally(() => this.loading = false);
        },

        onJump(e) {
            const id = typeof e !== 'object' ? e : undefined;
            this.$router.push({
                name: 'Meeting.Manage.Add',
                params: {
                    id,
                },
            });
        },

        onDelete(id) {
            $ele.$confirm('是否删除当前会议？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
            }).then(() => {
                this.loading = true;
                API.delete(`meeting/${id}`).then(() => {
                    $ele.$message.success('删除成功');
                    this.fetchData();
                }).finally(() => this.loading = false);
            });
        },
    },
    mounted() {
        this.fetchData();
    },
};
</script>

<style lang="scss" scoped>
.meet-img {
    width: 60px;
}
</style>
